<!--订单列表-->
<style scoped lang="less">
.em-sty {
  background: #edf8f8;
  padding: 2px;
  border-radius: 2px;
  font-size: 8px;
}
.gridbg {
  background-color: #fefefe;
}
.order-list {
  .todo {
    height:0.86rem; 
    line-height:0.86rem; 
    padding:0 0.2rem;
    .tag {
      height:0.56rem;
      line-height: 0.56rem;
      padding:0 0.2rem;
      margin-left: 0.1rem;
      background:#ff7202;
      color:#fff;
      border-radius: 0.28rem;
    }
  }
  .list-order-warp{
    background: #fff;
    .title {
      padding:10px;
      color:#888;
      font-size:14px; 
      border-bottom:1px solid #ebebeb;
    }
    .con {
      padding: 0.1rem 0.2rem;
      border-bottom: 1px solid #ebebeb;
      .cargo {
        margin: 0.1rem;
        height: 1.3rem;
        width:1.3rem;
        text-align: center;
        border-radius: .08rem;
        background: #edf8f8;
        overflow: hidden;
        i {
          display: block;
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #77babd;
        }
        p {
          height: .3rem;
          line-height: .3rem;
          font-size: .2rem;
          color: #fff;
          background: #77babd;
        }
      }
      .msg {
        margin-left:0.2rem;
        font-size:13px;
        line-height: 0.5rem;
        width: 5.5rem;
      }
    }
    .btn-grp {
      padding:0.1rem 0.2rem 0.1rem 0;
      text-align: right;
      .btn{
        margin-left: 0.1rem;
      }
    }
  }
}
</style>


<template>
  <div class="contain order-list">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入业务单号" v-model="sechTxt">
          </div>
        </div>
      </div>
      <div class="m-sech-btn" @click="goLink()">搜索</div>
    </div>
      <!-- <div class="m-sech-wrap mr20">
        <router-link :to="{path:'/search',query: { type: 'customDelivery', tabNo: this.tabNo}}" class="m-sech-box displayflex">
          <i class="iconfont icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <div class="txt">{{sechTxt || '请输入单号'}}</div>
          </div>
        </router-link>
      </div> -->
      <!--tab-->
      <div class="ft14">
        <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width='2' v-model="tabNo">
          <tab-item @on-item-click="tabNo = 0">全部</tab-item>
          <!-- <tab-item @on-item-click="tabNo = 1">待受理</tab-item>
          <tab-item @on-item-click="tabNo = 2">已受理</tab-item> -->
          <tab-item @on-item-click="tabNo = 1">配送中</tab-item>
          <tab-item @on-item-click="tabNo = 2">已签收</tab-item>
          <tab-item @on-item-click="tabNo = 3">异常</tab-item>
        </tab>
      </div>
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-167" class='scroller-wrap' @on-pullup-loading="getData" v-if="todolist.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="list-order-warp mb30" v-for="item in todolist">
          <div class="title">
            业务单号：{{item.BBillNo}}
            <em class="org f-r ft12">{{ (item.Information && item.Information !== ''?'Err': item.State) | PoState}}</em>
            <em class="em-sty" v-if="item.ResourceSource == 1">自有车队</em>
            <em class="em-sty" v-if="item.ResourceSource == 2">委托三方</em>
          </div>
          <div class="displayflex con" v-on:click="goToPath('/order/orderDetail', item, 1)">
            <span class="cargo">
              <i class="iconfont icon-cargo"></i>
              <p>{{item.Pkgs}}件 </p>
            </span>
            <div class="msg">
              <p v-if="item.Information && item.Information !== ''" class="ft15"><i class="llse llse-yichang ft15 red"></i>{{item.ExceptionMemo && item.ExceptionMemo !== ''?item.ExceptionMemo:item.Information}}</p>
              <p>起运时间：{{item.DepartureDate | time}}</p>
              <p>起运地：{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district }}{{item.DepartureAddress}}</p>
              <p>目的地：{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district }}{{item.ArrivalAddress}}</p>
              <p>收货单位：{{item.SaleCorpName}}</p>
              <p  style="border-top: 1px dashed #ebebeb" v-if="item.ResourceSource == 2">承运商：{{item.DeliverName == null?'--':item.DeliverName}}</p>
              <p v-if="item.ResourceSource == 2">物流单号：{{item.TPLPoNo == null?'--':item.TPLPoNo}}</p>
              <p style="border-top: 1px dashed #ebebeb" v-if="item.ResourceSource == 1">排车单号：{{item.ATVNo == null?'--':item.ATVNo}}</p>
              <p v-if="item.ResourceSource == 1">车辆：{{item.PlateNumber == null?'--':item.PlateNumber}}</p>
            </div>
          </div>
          <div class="btn-grp">
            <div class="btn" v-on:click="goToPath('/order/orderDetail', item, 1)">详情</div>
            <template v-if="!item.Information">
              <div class="btn" v-on:click="goToPath('/order/progress', item, 2)">进度</div>
              <div class="btn" v-on:click="goToPath('/order/progress', item, 3)" v-if="item.State * 1 > 50">配送详情</div>
              <div class="btn" v-on:click="goToPath('/order/receiptDetail', item, 4)" v-if="item.State * 1 === 81 && item.BackBillFlag === 'Y'">回单查看</div>
              <!-- <div class="btn" v-on:click="goToPath(item, 5)" v-if="item.State * 1 === 11">受理</div> -->
            </template>

          </div>
        </div>
        <div v-if="noMore" class="loader-over" style="height: 150px;">没有更多记录了</div>
      </div>
      <!-- <div v-if="noMore" class="loader-over">没有更多记录了</div> -->
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='2'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
import { mapState } from 'vuex';
export default {
  name:'delivery',
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',
      todolist:[],
      tabNo:-1,
      threshold:4,

      stateList:["81", "52", "53", "56", "11", "12", "41"],

      PageIndex: 1,
      PageSize:4,
      totalRecords:0,
      noMore:false,
      ScrollerConfig:{
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      },
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    }
  },
  watch: {
    tabNo(n,o){
      this.stateList = [];
      switch (n) {
        case 0:
          this.stateList = ["81", "52", "53", "56", "51","44","41"];
          break;
        case 1:
          this.stateList = ["52", "53", "56"];
          break;
        case 2:
          this.stateList = ["81"];
          break;
        case 3:
          this.stateList = [];
          break;
      }
      this.goLink();
    }
  },
  created(){
    this.$nextTick(()=>{
      this.sechTxt = sessionStorage.sechtxt;
      if(sessionStorage.getItem('ConsumableTab')){
        this.tabNo = sessionStorage.getItem('ConsumableTab')*1;
        sessionStorage.removeItem('ConsumableTab')
      } else {
        this.tabNo = 0;
      }
    })
  },
  mounted() {
    this.$nextTick(function() {
      
    })
  },
  methods: {
    goLink(){
      sessionStorage.removeItem('sechtxt');
      this.getData(1);
    },
    getData(type){
      if (type == 1) {
        this.PageIndex = 1;
        this.todolist = [];
      }
      let query = {
          BBillNo: this.sechTxt,
          StateList: this.stateList,
          TenantGuid: this.userinfo.TenantGuid,
          TPWareHouseCorpGuid: this.userinfo.BelongGuid,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        };
      if(this.tabNo !== 0){
        query.ExceptionMark = 'N';
      }
      if(this.tabNo === 3) {
        query.ExceptionMark = 'Y';
      }
      this.Ajax.post('GetCargoOwnerOrderList',query).then((res) => {
        if (res.IsSuccess) {
          this.totalRecords = res.TotalRecords; 
          if(res.Datas && res.Datas.length > 0){
            this.PageIndex++;
            this.todolist = this.todolist.concat(res.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    },
    goToPath(url, item, type){
      let query = {};

      //订单详情
      if(type === 1){
        query = {
          BBGuid: item.Guid,
        }
      }
      //订单进度
      if(type === 2){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 1
        }
      }
      //配送详情
      if(type === 3){
        query = {
          BBGuid: item.Guid,
          MainPoGuid: item.MainPoGuid,
          tabNo: 2
        }
      }

      //配送详情
      if(type === 4){
        query = {
          BBGuid: item.Guid,
        }
      }

      this.$router.push({
        path: url,
        query: query,
      })

    },
    gotoDet(value){
      // sessionStorage.item = JSON.stringify(value);
      this.$router.push({
        path:'/order/acceptDetail',
        query:{
          id:value.Guid
        }
      })
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>